<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>global transform</title>
	</head>
	<body>
		<canvas width="512" height="512"></canvas>
		<script src="/js/mesh.js"></script>
		<script>
			const {Renderer, Figure2D, Mesh2D} = meshjs;

			const canvas = document.querySelector('canvas');
			const renderer = new Renderer(canvas, {
			  contextType: '2d',
			});

			// renderer.setGlobalTransform(1, 0.2, 0.3, 1, 70, 70)
			// renderer.globalTranslate(70, 70)
			renderer.globalRotate(Math.PI / 6, [50, 50]);
			// renderer.globalSkew(50, 50, [50, 50])
			// renderer.globalScale(0.5, 0.5)

			const figure = new Figure2D();
			figure.rect(50, 50, 150, 150);

			const mesh1 = new Mesh2D(figure);
			const mesh2 = new Mesh2D(figure);

			mesh1.setFill({
			  color: [1, 0, 0, 0.5],
			});

			mesh2.setFill({
			  color: [0, 0, 1, 0.5],
			});

			mesh2.translate(50, 50);

			function update(t) {
			  renderer.clear();
			  renderer.drawMeshes([mesh1]);
			  renderer.drawMeshes([mesh2]);
			  // requestAnimationFrame(update)
			}
			update(0);
		</script>
	</body>
</html>
